/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {
  Form, Input, Radio, Select, Icon,
  Upload, Tooltip, DatePicker, Button,
} from 'antd';
import {connect} from 'dva';
import ReactDataGrid from 'react-data-grid';
import moment from 'moment'
import request from '@/utils/request';
import find from 'lodash/find'
const FormItem = Form.Item;
const { TextArea } = Input;
const RadioGroup = Radio.Group;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users:[],
      meterArr: [],
      address:[{ name: this.props.activeKey},
        { name: "限值" }]
    };
  }

  componentDidMount() {
    const that=this;
    let sampling_location=this.props.activeKey;
    let adtitle='氨氮mg/L';
    let ad='≤0.8';
    let sd='≤15';
    if(sampling_location==='示范区水厂出厂水'||sampling_location==='七泉湖出厂水'||sampling_location==='七泉湖进场水'){
      adtitle='游离余氯mg/L';
      ad='0.30-4.0'
    }else if(sampling_location==='塔尔浪水源水'){
      adtitle='氨氮mg/L';
      ad='0.10-0.80'
    }else if(sampling_location==='老城区水厂出厂水'||sampling_location==='塔尔浪出厂水'){
      adtitle='二氧化氯mg/L';
      ad='0.10-0.80'
    }
    if(sampling_location==='塔尔浪水源水'){
      adtitle='氨(以N计)mg/L'
      ad='≤1';
      sd='不限';
    }
    if(sampling_location==='示范区水厂出厂水'){
      adtitle='游离氯mg/L';
      ad='0.30-2.0'
    }
    if(sampling_location==='七泉湖出厂水'){
      adtitle='游离氯mg/L';
      ad='0.30-2.0'
    }
    if(sampling_location==='七泉湖进场水'){
      ad='≤1'
      adtitle='氨(以N计)mg/L'
    }
    let arr=[
      {name:'浑浊度NTU',key:'hzd',maxValue:(sampling_location==='塔尔浪水源水'||sampling_location==='七泉湖进场水')?'--':'≤1.0',initValue:'0'},
      {name:'色度',key:'sd',maxValue:(sampling_location==='塔尔浪水源水'||sampling_location==='七泉湖进场水')?'--':sd,initValue:'<5'},
      {name:'肉眼可见物',key:'rykjw',maxValue:(sampling_location==='塔尔浪水源水'||sampling_location==='七泉湖进场水')?'--':'无',initValue:'无'},
      {name:'臭和味',key:'chw',maxValue:(sampling_location==='塔尔浪水源水'||sampling_location==='七泉湖进场水')?'--':'无异臭、异味',initValue:'无'},
      {name:'PH值',key:'ph',maxValue:'6-9',initValue:'0'},
      {name:'细菌总数CFU/ML',key:'xjzs',maxValue:(sampling_location==='塔尔浪水源水'||sampling_location==='七泉湖进场水')?'--':'≤100',initValue:'0'},
      {name:'总大肠菌群MPN/100ML',key:'zdcjq',maxValue:(sampling_location==='塔尔浪水源水'||sampling_location==='七泉湖进场水')?'--':'不得检出',initValue:'未检出'},
      {name:'耐热大肠菌群MPN/100mL',key:'fdcjq',maxValue:(sampling_location==='塔尔浪水源水'||sampling_location==='七泉湖进场水')?'--':'不得检出',initValue:'未检出'},
      {name:'高锰酸盐指数(以O2计)',key:'hyl',maxValue:'≤6',initValue:'0'},
      {name:adtitle,key:'ad',maxValue:ad,initValue:'0'},
      ]
    let meterArr=this.state.meterArr
    if(this.props.editRecord){
      console.log(this.props.editRecord.items)
    }
    for(let i=0;i<arr.length;i++){
      meterArr.push({
        key:arr[i].key,
        name:arr[i].name,
        maxValue:arr[i].maxValue,
        initValue:this.props.editRecord?find(this.props.editRecord.items,(o)=>{return o.key===arr[i].key}).value
          :arr[i].initValue,

      })
    }
    this.setState({meterArr})
  }
  renderColumn=(item)=>{
    let renderColumnItem=[]
    const {getFieldDecorator} = this.props.form;
    for(let i=0;i<this.state.address.length;i++){
      if(i===this.state.address.length-1){
        renderColumnItem.push(
          <FormItem
        style={{ flex: '1', marginRight: '0' }}

      >
        {getFieldDecorator(`${this.state.address[i].name}$${item.key}`, {
          initialValue: item.maxValue,
        })(
          <Input style={{ width: '100%', fontWeight: 'bold' }} disabled/>,
        )}
      </FormItem>
        )
      }else{
        renderColumnItem.push(
          <FormItem
            style={{ flex: '1', marginRight: '0' }}

          >
            {getFieldDecorator(`${this.state.address[i].name}$${item.key}`, {
              initialValue: item.initValue,
            })(
              <Input style={{ width: '100%', fontWeight: 'bold' }}/>,
            )}
          </FormItem>
        )
      }

    }
    return renderColumnItem
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 14},
      }
    };

    const {getFieldDecorator} = this.props.form;
    const meterForms = this.state.meterArr.map((item, index) => {
      return (
        <Form style={{ display: 'flex' }} className={'custom-table-form'}
              key={index} layout="inline">
          <div style={{ width: '170px', lineHeight: '29px', textAlign: 'center', border: '1px solid #d9d9d9' }}>
            {item.name}
          </div>
          {this.renderColumn(item)}
        </Form>
      );
    });

    return (
      <div>
        <Form onSubmit={this.handleSubmit} >
          <FormItem
            style={{display:'inline-block',width:'50%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               采样日期
            </span>
            )}
          >
            {getFieldDecorator('sampling_date', {
              initialValue: this.props.editRecord?moment(this.props.editRecord.sampling_date):moment(),
            })(
              <DatePicker allowClear={false} />
            )}
          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'50%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               采样地点
            </span>
            )}
          >
            {getFieldDecorator('sampling_location', {
              initialValue: this.props.editRecord?this.props.editRecord.sampling_location:this.props.activeKey,
            })(
              <Input disabled={true}/>
            )}
          </FormItem>
        </Form>
        <div style={{ border: '1px solid #d9d9d9' }}>
          <div style={{
            display: 'flex',
            fontWeight: 'bold',
            lineHeight: '32px',
            height: '32px',
            background: 'rgb(249,249,249)',
          }}>
            <div style={{ width: '170px', paddingLeft: '10px', border: '1px solid #d9d9d9' }}></div>
            {
              this.state.address.map((item,index)=>{
                return   <div key={index} style={{ flex: '1', paddingLeft: '10px', border: '1px solid #d9d9d9' }}>
                  {item.name}</div>
              })
            }
          </div>
          <div >
            {meterForms}
          </div>

        </div>
        <Form onSubmit={this.handleSubmit} style={{textAlign:'center',marginTop:'10px'}}>
          <FormItem
            style={{display:'inline-block',width:'50%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               记录人
            </span>
            )}
          >
            {getFieldDecorator('recorder', {
              initialValue: this.props.editRecord?this.props.editRecord.recorder:"",
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{display:'inline-block',width:'50%'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               负责人
            </span>
            )}
          >
            {getFieldDecorator('manager', {
              initialValue: this.props.editRecord?this.props.editRecord.manager:"",
            })(
              <Input />
            )}
          </FormItem>
        </Form>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


